<template>
  <div class="driver">
    <div class="form">
       <el-form ref="form" :model="form" :rules="rule"  label-width="auto"  inline="true" size="mini">

            <el-form-item prop="trkNo" label="模板名称：">
              <el-input v-model="form.trkNo" clearable></el-input>
            </el-form-item>

         <el-form-item prop="" label="">
        <el-button type="primary" size="mini" @click="search">查 询</el-button>
            </el-form-item>
    </el-form>
    </div>
    <div class="btn">
      <el-button plain size="mini" type="success" @click="addCar">模板上传</el-button>
      <el-button plain size="mini" type="danger" @click="delCar">删除模板</el-button>
      <!-- <el-button plain size="mini" type="primary" @click="audit">审核</el-button>
      <el-button plain size="mini" type="warning" @click="cancelAudit">取消审核</el-button> -->
    </div>
    <div class="table" ref="inner">
       <el-table :data="tableData" border
          :height="maxHeight"
          :header-cell-style="{ textAlign: 'center' }"
          highlight-current-row
          @row-click="rowClick"
          @row-dblclick="dbrowClick"
          >
        <el-table-column label="序号" type="index"  width="50"> </el-table-column>
        <el-table-column  align="left" prop="trkNo" label="模板名称" show-overflow-tooltip   sortable></el-table-column>
        <el-table-column  align="left" prop="trkDrvName" label="创建时间" show-overflow-tooltip   sortable></el-table-column>
        <el-table-column  align="left" prop="trkNo" label="创建人" show-overflow-tooltip   sortable></el-table-column>
        <el-table-column  align="left" prop="trkDrvName" label="修改时间" show-overflow-tooltip  sortable></el-table-column>
         <el-table-column align="left" prop="trkDrvName" label="修改人" show-overflow-tooltip  sortable></el-table-column>
       </el-table>
    </div>
    <div class="pages">
       <el-pagination
      ref="pagination"
      small
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="Pagination.currentPage"
      :page-sizes="Pagination.pageSizeList"
      :page-size="Pagination.pageSize"
      :layout="Pagination.layout"
      :total="Pagination.total">
    </el-pagination>
    </div>
    <!-- 对话框 新增 模板 -->
     <el-dialog
    :title="name"
    :visible.sync="openDialog"
    v-if="openDialog"
    v-el-drag-dialog
    :before-close="close"
    :close-on-click-modal="false"
    width="50%"
     >
     <el-form :model="dialogForm" size="mini" :rules="dialogRule"  ref="dialogForm" label-width="auto">
       <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="trkNo" label="模板名称：">
              <el-input v-model="dialogForm.trkNo" style="width:95%"  clearable  maxlength="32">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="trkDriverUuid" label="模板文件：" >
              <el-upload
                  class="upload-demo"
                  drag
                  action=""
                  :http-request="httpRequest"
                  multiple>
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                  <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
                </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer" >
      <el-button type="primary" @click="save" size="mini">保存</el-button>
      <el-button  @click="close" size="mini">关闭</el-button>
      </div>
     </el-dialog>
  </div>
</template>


<script>
import paginationMixin from '@/mixins/pagination'
import resizeMixin from '@/mixins/resize'
import {contractTemplateList,uploadText} from '@/request/api'
export default {
  name:'router.contractTemplate',
  mixins:[paginationMixin,resizeMixin],
  data(){
    return{
      form:{
        trkNo:'',
        trkType:''
      },
      maxHeight:-1,
      tableData:[],
      currentData:{},
      issuse:'',
      // 车辆对话框
      name:'',
      openDialog:false,
      dialogForm:{},
      // dialogRule:{
      //   trkDriverUuid:[{required:true,message:'请上传模板文件',trigger:'change'}],
      // },
      //上传、查看图片对话框
      openUpload:false,
    }
  },
  created(){
    this.resize = () => {
      this.maxHeight = this.$refs.inner.offsetHeight
    }
  },
  mounted(){
    this.refreshList()
  },
  methods:{
    //查询
    search(){
      this.$refs.form.validate(valid=>{
        if(valid){
          this.refreshList()
        }
      })
    },
    //table表格数据
    getList(currentPage, pageSize, updateTotal){
      contractTemplateList({
        trkNo:this.form.trkNo,
        trkType:this.form.trkType,
        PageIndexs: currentPage.toString(),
        PageSizes: pageSize.toString()
      }).then(response => {
        this.tableData = response.data
        updateTotal(Number(response.total))
      })
    },
    //文件上传
    httpRequest({file}){
     uploadText(file).then(res => {
        if(res.success=='1'){
          this.refreshList(),
          this.$alert('文件上传成功！', '提示', {
            confirmButtonText: '确定'
          })
        }
      })
    },
    //证件上传
    upload(){
      this.openUpload=true
      this.title='上传证件'
    },

    //单击行
    rowClick(row){
      this.currentData=Object.assign({},row)
    },
    //保存
    save(){
      this.$refs.dialogForm.validate(valid=>{
        if(valid){

          this.$message.warning({
            message: '保存成功',
            showClose: true
          })
          this.openDialog=false
        }
      })
    },
    //合同模板上传
    addCar(){
      this.openDialog=true
      this.name='合同模板上传'
    },
    //关闭车辆对话框
    close(){
      this.openDialog=false
      this.currentData={}
      this.refreshList()
    }
  }
}
</script>
<style lang="scss" scoped>
.pic{
  height: 500px;
  overflow: auto;
   img{
     width: 100%;
  }
}
.driver{
  width:100%;
  height:100%;
  padding:15px 15px 12px;
  display:flex;
  flex-direction:column;
  .form{
    height:30px;
  }
  .btn{
    height:50px;
    line-height:50px;
  }
  .name{
    font-size:16px;
    line-height:20px;
    font-weight:500;
  }
  .table{
    flex:1;
  }
  .pages{
    height:30px;
  }

  .box{  //上传对话框
  overflow:hidden;
  height: 200px;
    .selectItem{
      // float:right;
      display:inline-block;
      width:50%;
      height:100%;
      box-sizing: border-box;
      padding:20px;
    }
    .upload{
      // float:right;
      display:inline-block;
      width:50%;
      height:100%;
      box-sizing: border-box;
      padding:20px;
    }
  }
}

</style>
